<template>
  <div class="app-container">
    <div class="head_options">
      <div class="head_btn">
        <el-button
          type="primary"
          :plain="current != 'yesterday'"
          @click="changeTime('yesterday')"
          >{{ $t("昨天") }}</el-button
        >
        <el-button
          type="primary"
          :plain="current != 'today'"
          @click="changeTime('today')"
          >{{ $t("今天") }}</el-button
        >
        <el-button
          type="primary"
          :plain="current != 'lastWeek'"
          @click="changeTime('lastWeek')"
          >{{ $t("上周") }}</el-button
        >
        <el-button
          type="primary"
          :plain="current != 'week'"
          @click="changeTime('week')"
          >{{ $t("本周") }}</el-button
        >
        <el-button
          type="primary"
          :plain="current != 'lastMonth'"
          @click="changeTime('lastMonth')"
          >{{ $t("上月") }}</el-button
        >
        <el-button
          type="primary"
          :plain="current != 'month'"
          @click="changeTime('month')"
          >{{ $t("本月") }}</el-button
        >
        <el-button
          type="primary"
          :plain="current != 'lastYear'"
          @click="changeTime('lastYear')"
          >{{ $t("去年") }}</el-button
        >
        <el-button
          type="primary"
          :plain="current != 'year'"
          @click="changeTime('year')"
          >{{ $t("今年") }}</el-button
        >
        <el-button
          type="primary"
          :plain="current != 'write'"
          @click="changeTime('write')"
          >{{ $t("自定义") }}</el-button
        >
      </div>

      <div v-show="current == 'write'" style="margin-bottom: 20px;">
        <el-date-picker
          v-model="dates"
          style="margin-right: 20px;"
          type="daterange"
          value-format="yyyy-MM-dd"
          :range-separator="$t('至')"
          :start-placeholder="$t('开始日期')"
          :end-placeholder="$t('结束日期')"
        ></el-date-picker>
        <el-button type="primary" :disabled="!dates" @click="getData">{{
          $t("提交")
        }}</el-button>
      </div>
    </div>
    <!--  -->
    <div class="chart_box">
      <div class="chart_item">
        <div id="order_amount" style="height:400px;"></div>
        <div class="u-f u-f-ac total">
          <span class="font14 text_blue mr2">
            {{ $t("订单总金额") }}：{{ total.total_amount_sum }}
          </span>
          <span class="font14 text_green mr2">
            {{ $t("订单总实收金额") }}：{{ total.total_pay_amount_sum }}
          </span>
          <span class="font14 text_blue mr2">
            {{ $t("充氧宝总金额") }}：{{ total.battery_amount_sum }}
          </span>
          <span class="font14 text_green mr2">
            {{ $t("充氧宝实收金额") }}：{{ total.battery_pay_amount_sum }}
          </span>
          <!-- <span class="font14 text_warning mr2">
            {{ $t("密码线总金额") }}：{{ total.wired_amount_sum }}
          </span> -->
        </div>
      </div>

      <div class="chart_item">
        <div id="order_brokerage" style="height:400px;"></div>
        <div class="u-f u-f-ac total">
          <span class="font14 text_blue mr2">
            {{ $t("总分成") }}：{{ total.brokerage_amount_sum }}
          </span>
          <span class="font14 text_green mr2">
            {{ $t("结算分成") }}：{{ total.brokerage_settle_sum }}
          </span>
          <span class="font14 text_warning mr2">
            {{ $t("总取消分成") }}：{{ total.brokerage_cancel_sum }}
          </span>
        </div>
      </div>

      <div class="chart_item">
        <div id="order_num" style="height:400px;"></div>
        <div class="u-f u-f-ac total">
          <span class="font14 text_blue mr2">
            {{ $t("总订单数") }}：{{ total.total_num_sum }}
          </span>
          <span class="font14 text_green mr2">
            {{ $t("有效总订单数") }}：{{ total.total_pay_num_sum }}
          </span>
          <span class="font14 text_blue mr2">
            {{ $t("充氧宝总订单数") }}：{{ total.battery_num_sum }}
          </span>
          <span class="font14 text_green mr2">
            {{ $t("充氧宝付款订单数") }}：{{ total.battery_pay_num_sum }}
          </span>
          <!-- <span class="font14 text_warning mr2">
            {{ $t("密码线订单数") }}：{{ total.wired_num_sum }}
          </span> -->
        </div>
      </div>

      <div class="chart_item">
        <div id="order_refund" style="height:400px;"></div>
        <div class="u-f u-f-ac total">
          <span class="font14 text_blue mr2">
            {{ $t("充氧宝退款") }}：{{ total.battery_refund_sum }}
          </span>
          <span class="font14 text_warning mr2">
            {{ $t("充氧宝实收退款") }}：{{ total.battery_pay_refund_sum }}
          </span>
          <!-- <span class="font14 text_danger mr2">
            {{ $t("密码线退款") }}：{{ total.wired_refund_sum }}
          </span> -->
        </div>
      </div>
    </div>
    <refresh @click="getData"></refresh>
  </div>
</template>

<script>
import util from "@/assets/js/util.js";
export default {
  name: "stat-index",
  data() {
    return {
      current: "month",
      dates: "",
      total: {},
      battery_amount: [],
      battery_num: [],
      battery_pay_amount: [],
      battery_pay_num: [],
      battery_pay_refund: [],
      battery_refund: [],
      brokerage_amount: [],
      brokerage_cancel: [],
      brokerage_pay_cancel: [],
      brokerage_settle: [],
      day: [],
      total_pay_amount: [],
      total_amount: [],
      total_num: [],
      total_pay_num: [],
      wired_amount: [],
      wired_num: [],
      wired_refund: [],
    };
  },
  mounted() {
    this.dates = util.getDate("month");
    this.getData();
  },
  methods: {
    getData() {
      util
        .$http("/stat/index", {
          start: this.dates[0] || "",
          end: this.dates[1] || "",
        })
        .then((res) => {
          if (res.code == 1) {
            this.total = res.data.total;
            this.battery_amount = res.data.battery_amount;
            this.battery_num = res.data.battery_num;
            this.battery_pay_amount = res.data.battery_pay_amount;
            this.battery_pay_num = res.data.battery_pay_num;
            this.battery_pay_refund = res.data.battery_pay_refund;
            this.battery_refund = res.data.battery_refund;
            this.brokerage_amount = res.data.brokerage_amount;
            this.brokerage_cancel = res.data.brokerage_cancel;
            this.brokerage_pay_cancel = res.data.brokerage_pay_cancel;
            this.brokerage_settle = res.data.brokerage_settle;
            this.day = res.data.day;
            this.total_pay_amount = res.data.total_pay_amount;
            this.total_amount = res.data.total_amount;
            this.total_num = res.data.total_num;
            this.total_pay_num = res.data.total_pay_num;
            this.wired_amount = res.data.wired_amount;
            this.wired_num = res.data.wired_num;
            this.wired_refund = res.data.wired_refund;
            this.orderAmount();
            this.orderNum();
            this.orderBrokerage();
            this.orderRefund();
          }
        });
    },
    changeTime(type) {
      this.current = type;
      if (type == "write") {
        this.dates = "";
      } else {
        this.dates = util.getDate(type);
        this.getData();
      }
    },
    orderAmount() {
      let myChart = this.$echarts.init(document.getElementById("order_amount"));
      let option = {
        title: {
          text: this.$t("订单金额"),
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: [
            this.$t("订单总金额"),
            this.$t("订单总实收金额"),
            this.$t("充氧宝总金额"),
            this.$t("充氧宝实收金额"),
            // this.$t("密码线总金额"),
          ],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.day,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: this.$t("订单总金额"),
            type: "line",
            areaStyle: {},
            data: this.total_amount,
          },
          {
            name: this.$t("订单总实收金额"),
            type: "line",
            areaStyle: {},
            data: this.total_pay_amount,
          },
          {
            name: this.$t("充氧宝总金额"),
            type: "line",
            areaStyle: {},
            data: this.battery_amount,
          },
          {
            name: this.$t("充氧宝实收金额"),
            type: "line",
            areaStyle: {},
            data: this.battery_pay_amount,
          },
          // {
          //   name: this.$t("密码线总金额"),
          //   type: "line",
          //   areaStyle: {},
          //   data: this.wired_amount,
          // },
        ],
      };
      myChart.setOption(option);
    },
    orderNum() {
      let myChart = this.$echarts.init(document.getElementById("order_num"));
      let option = {
        title: {
          text: this.$t("订单数量"),
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: [
            this.$t("总订单数"),
            this.$t("有效总订单数"),
            this.$t("充氧宝总订单数"),
            this.$t("充氧宝付款订单数"),
            // this.$t("密码线订单数"),
          ],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.day,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: this.$t("总订单数"),
            type: "line",
            areaStyle: {},
            data: this.total_num,
          },
          {
            name: this.$t("有效总订单数"),
            type: "line",
            areaStyle: {},
            data: this.total_pay_num,
          },
          {
            name: this.$t("充氧宝总订单数"),
            type: "line",
            areaStyle: {},
            data: this.battery_num,
          },
          {
            name: this.$t("充氧宝付款订单数"),
            type: "line",
            areaStyle: {},
            data: this.battery_pay_num,
          },
          // {
          //   name: this.$t("密码线订单数"),
          //   type: "line",
          //   areaStyle: {},
          //   data: this.wired_num,
          // },
        ],
      };
      myChart.setOption(option);
    },
    orderBrokerage() {
      let myChart = this.$echarts.init(
        document.getElementById("order_brokerage")
      );
      let option = {
        title: {
          text: this.$t("订单分成"),
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: [
            this.$t("总分成"),
            this.$t("结算分成"),
            this.$t("总取消分成"),
          ],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.day,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: this.$t("总分成"),
            type: "line",
            areaStyle: {},
            data: this.brokerage_amount,
          },
          {
            name: this.$t("结算分成"),
            type: "line",
            areaStyle: {},
            data: this.brokerage_settle,
          },
          {
            name: this.$t("总取消分成"),
            type: "line",
            areaStyle: {},
            data: this.brokerage_cancel,
          },
        ],
      };
      myChart.setOption(option);
    },
    orderRefund() {
      let myChart = this.$echarts.init(document.getElementById("order_refund"));
      let option = {
        title: {
          text: this.$t("订单退款"),
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: [
            this.$t("充氧宝退款"),
            this.$t("充氧宝实收退款"),
            // this.$t("密码线退款"),
          ],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.day,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: this.$t("充氧宝退款"),
            type: "line",
            areaStyle: {},
            data: this.battery_refund,
          },
          {
            name: this.$t("充氧宝实收退款"),
            type: "line",
            areaStyle: {},
            data: this.battery_pay_refund,
          },
          // {
          //   name: this.$t("密码线退款"),
          //   type: "line",
          //   areaStyle: {},
          //   data: this.wired_refund,
          // },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.head_options {
  padding-left: 20px;
  margin-bottom: 40px;
}
.head_options .head_btn {
  margin-bottom: 20px;
}
.head_options .head {
  border-left: 4px solid #409eff;
  padding-left: 10px;
}
.chart_box {
  padding: 0 20px;
}
.chart_box .chart_item {
  margin-bottom: 40px;
}
.chart_box .chart_item .total {
  padding-left: 60px;
  margin-top: 30px;
}
.chart_box .chart_item .mr2 {
  margin-right: 20px;
}
</style>
